﻿@using PMS.Web.Models.SystemModules
@{
    Layout = "_AdminHomeLayout";
}
@model SystemModuleModel
<div class="layui-card">
    <div class="layui-card-body">
        <table id="pms-table" lay-filter="pms-table"></table>
    </div>
</div>

<script type="text/html" id="moduleOpenTypeTpl">
    {{#if (d.OpenMode == 1) { }}
    <span>无链接导航</span>
    {{# }else if(d.OpenMode == 2){ }}
    <span>页内标签导航</span>
    {{# }else if(d.OpenMode == 3){ }}
    <span>新窗口打开</span>
    {{# }else { }}
    <span>页面跳转</span>
    {{# } }}
</script>

@await Component.InvokeAsync("ModuleButtonTemplet", new { moduleId = Model.Id, position = ModuleButtonGroup.HeadButtonsGroup })
@await Component.InvokeAsync("ModuleButtonTemplet", new { moduleId = Model.Id, position = ModuleButtonGroup.RecordButtonsGroup })

@section Scripts{
    <script type="text/javascript">
        layui.use(['table', 'jquery', 'treetable', 'lodash'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let treetable = layui.treetable;
            let lodash = layui.lodash;

            let stores = [], buttons = [];
            treetable.render({
                treeColIndex: 2,  // 折叠图标显示在第几列
                treeSpid: 0,
                treeIdName: 'Id',
                treePidName: 'ParentModuleId',
                skin: 'line',
                method: 'get',
                treeDefaultClose: true,
                toolbar: '#pmsHeadbarTpl',
                elem: '#pms-table',
                url: backendwebapiConfig.getsystemmodulelist,
                page: false,
                cols: [
                    [
                        { type: "numbers", width: 50, fixed: "left" },
                        { field: 'Id', hide: true, title: 'ID' },
                        { field: '@Model.NameOf(p => p.DisplayName)', title: '@Model.DisplayName(m => m.DisplayName)', minWidth: 120  },
                        { field: '@Model.NameOf(p => p.HtmlIconCSSClass)', title: '@Model.DisplayName(m => m.HtmlIconCSSClass)', templet: "<div><i class='{{d.HtmlIconCSSClass}}'></i></div>", align: 'center' },
                        {
                            field: '@Model.NameOf(p => p.LimitedStoreIds)', title: '@Model.DisplayName(m => m.LimitedStoreIds)', minWidth: 150, templet: function (d) {
                                if (d.LimitedStoreIds.length === 0) return "无";
                                const filterStores = lodash.filter(stores, function (o) { return lodash.includes(d.LimitedStoreIds, o.Id); });
                                return lodash.join(lodash.map(filterStores, 'Name'), ',');
                            }
                        },
                        { field: '@Model.NameOf(p => p.OpenMode)', title: '@Model.DisplayName(m => m.OpenMode)', templet: '#moduleOpenTypeTpl' },
                        {
                            field: '@Model.NameOf(p => p.ModuleAssignedButtonIds)', title: '@Model.DisplayName(m => m.ModuleAssignedButtonIds)', minWidth: 100, templet: function (d) {
                                if (d.ModuleAssignedButtonIds.length === 0) return "无";
                                const filterBtns = lodash.filter(buttons, function (o) { return lodash.includes(d.ModuleAssignedButtonIds, o.Id); });
                                return lodash.join(lodash.map(filterBtns, 'DisplayName'), ',');
                            }
                        },
                        { field: '@Model.NameOf(p => p.DisplayOrder)', title: '@Model.DisplayName(m => m.DisplayOrder)', width: 80, align: 'center' },
                        { title: '操作', templet: '#pmsRecordBarTpl', width: 150, align: 'center' }
                    ]
                ],
                parseData: function (res) {
                    const success = res.state == 200;
                    if (success) {
                        stores = res.data.Stores;
                        buttons = res.data.ModuleButtons;
                    }
                    return {
                        "code": success ? 0 : -1,           //解析接口状态
                        "msg": success ? "" : res.message,  //解析提示文本
                        "data": success ? res.data.ModuleModels : null   //解析数据列表
                    };
                }
            });
            //监听顶部按钮栏
            let editWindowConfig = {
                title: "编辑/修改",
                type: 2,
                content: "",
                fixtolayoutbody: true,
                anim: 3,
                end: function () {
                    window.location.reload(true);
                }
            };
            table.on('toolbar(pms-table)', function (obj) {
                const $btnElem = $(this);
                const isBtnDisabled = $btnElem.hasClass("layui-btn-disabled");
                if (isBtnDisabled) return false;
                const buttonId = $btnElem.data("buttonid");
                const moduleId = $btnElem.data("moduleid");
                if (obj.event === 'OnAdd') {
                    editWindowConfig.content = bakcendviewConfig.systemmoduleeditview + "?buttonid=" + buttonId + "&moduleid=" + moduleId;
                    PMSUtils.popupWindow(editWindowConfig);
                } else if (obj.event === 'OnExpandAll') {
                    treetable.expandAll("#pms-table");
                } else if (obj.event === 'OnFoldAll') {
                    treetable.foldAll("#pms-table");
                }
            });
            //监听表格数据行按钮
            table.on('tool(pms-table)', function (obj) {
                const data = obj.data;
                const $btnElem = $(this);
                const isBtnDisabled = $btnElem.hasClass("layui-btn-disabled");
                if (isBtnDisabled) return false;
                const buttonId = $btnElem.data("buttonid");
                const moduleId = $btnElem.data("moduleid");
                if (obj.event === 'OnEdit') {
                    editWindowConfig.content = bakcendviewConfig.systemmoduleeditview + "?buttonid=" + buttonId + "&moduleid=" + moduleId + "&dataid=" + data.Id;
                    PMSUtils.popupWindow(editWindowConfig);
                } else if (obj.event === 'OnDelete') {
                    alert("OnDelete");
                }
            });
        })
    </script>
}